<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>${fileName!''}</title>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <link href="/BJUI/themes/css/bootstrap.css" rel="stylesheet">
    <link href="/BJUI/themes/css/FA/css/font-awesome.min.css" rel="stylesheet">
    <link href="/BJUI/themes/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>

    <link rel="stylesheet" href="/codemirror/lib/codemirror.css" rel="external nofollow" >
    <script src="/codemirror/lib/codemirror.js"></script>

    <script src="/codemirror/addon/mode/loadmode.js"></script>
    <script src="/codemirror/mode/meta.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            CodeMirror.modeURL = "/codemirror/mode/%N/%N.js";
            var codeMirrorEditor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                mode: mode,
                styleActiveLine: true,
                lineNumbers: true,
                matchBrackets: true,
                matchBrackets : true,
                autofocus: true,
                showCursorWhenSelecting:true,
                smartIndent: true,
                lineWrapping: true,
            });
            var mac = CodeMirror.keyMap.default == CodeMirror.keyMap.macDefault;
            CodeMirror.keyMap.default[(mac ? "Cmd" : "Ctrl") + "-Space"] = "autocomplete";

            var mode = CodeMirror.findModeByExtension('${extension!""}');
            if (mode) {
              codeMirrorEditor.setOption("mode", mode.mime);
              CodeMirror.autoLoadMode(codeMirrorEditor, mode.mode);
            }

            $("#close-info").click(function(){
                $("#info-box").hide();
                $("#mask-layer").hide();
            });
            $("#saveBtn").click(function(){
                var fileContent = codeMirrorEditor.getValue();
                $.ajax({
                     type: "POST",
                     url: "/filemanager/save.ajax",
                     data: {fileContent:fileContent, path:'${relativePath!''}'},
                     dataType: "json",
                     success: function(data){
                         console.log(data);
                         console.log(window.parent.document);
                         console.log($(window.parent.document).find('#bjui-hnav'));
                         if(data.statusCode==200){
                            $("#info-box").show();
                            $("#mask-layer").show();
                            $("#info-box").find('#msg-box').addClass("correct").removeClass("error");
                            $("#info-box").find('.msg').html(data.message);
                            $("#info-box").find('h1').html('<i class="fa fa-check-circle"></i>成功');
                         }else{
                            $("#info-box").show();
                            $("#mask-layer").show();
                            $("#info-box").find('#msg-box').addClass("error").removeClass("correct");
                            $("#info-box").find('.msg').html(data.message);
                            $("#info-box").find('h1').html('<i class="fa fa-check-circle"></i>失败');
                         }
                      }
                 });
            });
        });
    </script>
    <style>
        .CodeMirror {
            border: 1px solid #eee;
            height: 99%;
        }
        .CodeMirror-code * {
            font-size: 14px;
            line-height: 1.8;
        }
        .save-btn, .download-btn{
            position: absolute;
            z-index: 99;
        }
    </style>
</head>
<body style="padding: 0; margin: 0;">
    <div  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;">
        <textarea id="editor">${fileContent!''}</textarea>
    </div>
    <div id="mask-layer" style="position: absolute;top: 0px;left: 0px;width: 100%; height: 100%;z-index: 998;display: none;background: #000000;opacity: 0.3;"></div>
    <div id="info-box" style="position: absolute;top: 0px;left: 0px;width: 100%; height: 100%;z-index: 999;display: none;">
        <div id="bjui-alertMsgBox" class="bjui-alert" style="top: 50px;">
            <div class="alertContent">
            <div id="msg-box" class="correct">
                <div class="alertInner"><h1><i class="fa fa-times-circle"></i>错误提示</h1><div class="msg">我是错误提示</div></div>
                <div class="toolBar">
                    <ul><li><button id="close-info" class="btn btn-default" type="button" href="javascript:;"><i class="fa fa-close"></i> 确定</button></li></ul>
                </div>
                </div>
            </div>
        </div>
    </div>
    <a type="button" class="btn btn-default btn-lg save-btn" id="saveBtn" style="top: 20px;right: 130px;">
        <i class="fa fa-save"></i>
         保存
    </a>
    <a type="button" class="btn btn-default btn-lg download-btn" style="top: 20px;right: 30px;" href="/filemanager/download.htm?path=${(relativePath!'')?url}" target="_blank">
        <i class="fa fa-download"></i>
         下载
    </a>
</body>
</html>
